<template>
	<view class="pd15">
		<view class="mt24" style="position: relative;">
			<image src="/static/creator/rechangeBg.png" class="bdr12" mode="aspectFill"
				style="width: 100%;height: 220rpx;"></image>
			<view class="goldBox  flex alcenter space bdr12 cl-w">
				<view>
					<view class="flex alcenter">
						<view>CLIP{{$t('text.integral')}}</view>
						<!-- <view class="mr5">{{$t('play.balance')}}</view> -->
						<u-icon name="arrow-right" color="#fff" size="14"></u-icon>
					</view>
					<view class="ft36 ftw600">{{money}}</view>
					<!-- <view class="ft12">10金币=1元，当前可兑换约20元</view> -->
				</view>

			</view>
		</view>
		<view class="flex space mt20 cl-w" @click="$u.route('pages/creator/user/coin/details')">
			<view class="ft16">{{$t('text.recharge')}}</view>
			<view class="">{{$t('play.czmx')}}</view>
		</view>
		<!-- 渲 -->
		<view class="flex wrap mt15" style="gap: 30rpx;">
			<view class="item-content" v-for="(item,index) in list" :key="index" :class="activeIndex==index?'active':''"
				@click="select(item,index)">
				<view class="flex alcenter">
					<image src="/static/img/my/coin.png" mode="" style="width: 40rpx;height: 40rpx;"></image>
					<view class="cl-w ml10 ft20">{{item.oneTimePurchaseOfferDetails.formattedPrice}}</view>
				</view>
				<view class="money">{{item.oneTimePurchaseOfferDetails.formattedPrice}}</view>
				<view class="tuijian">{{$t('tabbar.recommend')}}</view>
			</view>
		</view>
		<view class="release">
			<view class="btn" @click="$u.throttle(submit, 1000)">{{$t('text.recharge')}}</view>
		</view>
		<!-- <view class="release">
			<view class="btn" @click="$u.route('/pages/creator/user/releaseVideo/release')">发布视频</view>
		</view> -->
	</view>

</template>

<script>
	var googlePay = uni.requireNativePlugin('sn-googlepay5');
	export default {

		data() {
			return {
				money: 0,
				activeIndex: 0,
				list: '',
				selectedProduct: {}
			}
		},
		onLoad(e) {
			//console.log(111)
			this.init()
			this.$httpas.post2({
				data: {
					do: 'creator',
					op: 'index',
				},
				success: res => {
					this.money = res.money
				}
			})
		},

		methods: {
			select(item, index) {
				console.log('item', item);
				this.selectedProduct.allVAalue = item //所选参数
				this.selectedProduct.productId = item.productId;
				this.activeIndex = index
			},
			async init() {
				googlePay.init({
					autoReconnect: true, // 是否自动重连(插件实现)
					enableAutoServiceReconnection: true, //是否自动重连（8.0+支持）
					enableExternalOffer: true, // 是否启用外部优惠
					enableAlternativeBillingOnly: true //
				}, (e) => {
					if (e.code == 0) {
						this.isConnected = true;
						// 初始化成功
						console.log(e, 'ee');
						var pId = ['vip_1001', 'vip_1003'];
						googlePay.querySku({
								inapp: pId //内购
							},
							(e) => {
								if (e.code == 0) {
									if (e.list && e.list.length > 0) {
										console.log('共查询到 ' + e.list.length + ' 个商品');
										this.list = e.list
										console.log('this.list', this.list);
										// 遍历商品列表
										e.list.forEach((product, productIndex) => {
											if (product.subscriptionOfferDetails && product
												.subscriptionOfferDetails.length > 0) {
												product.subscriptionOfferDetails.forEach((offer,
													offerIndex) => {

													this.offerToken = offer.offerToken;

													// 提取第三层：定价阶段信息
													if (offer.pricingPhases && offer
														.pricingPhases.pricingPhaseList) {
														offer.pricingPhases
															.pricingPhaseList.forEach((
																	phase, phaseIndex
																	) => {});


													} else {
														console.log('该优惠方案无定价阶段信息');
													}
												});
											} else {
												console.log('该商品无订阅优惠详情');
											}
										});
									} else {
										console.log('未查询到任何商品数据');
									}
								} else {
									//查询失败
									console.log('querySku fail', e);
								}
							}
						);
					} else {
						this.isConnected = false;
						// 初始化失败
					}
				});
				// let params = {
				// 	language: 0
				// }
				// let [err, res] = await this.$httpas.get('/api/cz/list', params);
				// this.list = res.data.data
				// console.log(this.list,'this.list');
			},
			async submit() {
				// let params = {
				// 	money: 11
				// }
				// params.token = uni.getStorageSync("userinfo").token
				// let [err, res] = await this.$httpas.get('/api/cz/addOrder', params);
				googlePay.pay({
						productId: this.selectedProduct.productId // 产品id
					},
					(e) => {
						console.log('pay result', e);
						if (e.code != 1) {
							// 步骤三：确认订单
							googlePay.consume({
									purchaseToken: e.data[0].original.purchaseToken
								},
								(e) => {
									console.log('consume result', e);
									this.$httpas.post2({
										data: {
											do: 'cz',
											op: 'googlepay',
											eee: JSON.stringify(e),
											allID: JSON.stringify(this.selectedProduct.allVAalue)
										},
										success: res => {
											uni.showToast({
												title: '' + res,
												icon: 'none'
											});
										}
									})
								}
							);
						} else {

						}


					}
				);
			},
		}
	}
</script>

<style lang="scss">
	.goldBox {
		width: 100%;
		opacity: 1;
		// background: linear-gradient(133.93deg, #32E19F 0%, #05CDA9 100%);
		padding: 30rpx;
		position: absolute;
		top: 0;
	}

	.rechangeBtn {
		display: flex;
		align-items: center;
		justify-content: center;
		opacity: 1;
		border-radius: 20px;
		border: 1px solid #fff;
		padding: 8rpx 0;
	}

	.bdr12 {
		border-radius: 12px;
	}

	.item-content {
		background: rgba(255, 255, 255, 0.1);
		border-radius: 10rpx;
		padding: 50rpx 0;
		width: 30%;
		display: flex;
		flex-direction: column;
		align-items: center;
		border: 1px solid rgba(255, 255, 255, 0.1);
		position: relative;

		.money {
			margin-top: 20rpx;
			color: rgba(11, 144, 249, 1);
		}

		.tuijian {
			position: absolute;
			top: -16rpx;
			left: 0;
			border-radius: 8px 0px 8px 0px;
			background: rgba(11, 144, 249, 1);
			color: #fff;
			font-size: 24rpx;
			width: 70rpx;
			height: 32rpx;
			text-align: center;
			line-height: 32rpx;
		}
	}

	.active {
		border: 1px solid rgba(26, 140, 239, 1);
		background: rgba(26, 140, 239, 0.15);
	}

	.release {
		display: flex;
		justify-content: center;
		margin-top: 100rpx;


		.btn {
			width: 80%;
			background: rgba(11, 144, 249, 1);
			text-align: center;
			border-radius: 50rpx;
			padding: 20rpx 0;
			font-size: 32rpx;
			color: #fff;
		}
	}
</style>